<template>
  <div class="mb24">
    <div style="display: flex; align-items: center; margin-top: 20px">
      <p style="margin: 0">
        共
        <span style="color: #f7b500ff">{{ length }}</span>
        条记录
      </p>
      <a-button style="margin-left: 20px" :disabled="state != 0" @click="addClick"> <a-icon type="plus" />新增合同 </a-button>
    </div>
    <a-row class="header-title mt16 mb12" v-if="electronic.length > 0 || state == 2">
      <div class="title-info">电子合同</div>
      <hr class="title-line" />
    </a-row>
    <electronicCOM :list="electronic" :state="state" :employInfoId="employInfoId" @upState="upState" @upDate="initData" />
    <a-row class="header-title mt16 mb12" v-if="paper.length > 0 || state == 1">
      <div class="title-info">纸质合同</div>
      <hr class="title-line" />
    </a-row>
    <paperCOM :list="paper" :state="state" :employInfoId="employInfoId" @upState="upState" @upDate="initData" />
    <a-empty v-if="!state && paper.length <= 0 && electronic.length <= 0" style="margin-top: 80px" />
    <a-modal v-model="addVisible" title="新增合同" @ok="handleOk" @cancel="handleCancel">
      <div style="display: flex; justify-content: center">
        <a-space size="large">
          <div
            @click="paperClick(1)"
            :style="borderStyle1"
            style="cursor: pointer; width: 120px; height: 126px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12); border-radius: 4px"
          >
            <img
              :src="require('@/assets/img/fileicon/hetong1.png')"
              style="width: 70px; height: 75px; margin-left: 25px; margin-top: 15px"
            />
            <p style="font-size: 14px; font-weight: 600; color: #55565d; line-height: 21px; margin-left: 30px; margin-bottom: 0">
              纸质合同
            </p>
          </div>
          <div
            @click="electronicClick(2)"
            :style="borderStyle2"
            style="cursor: pointer; width: 120px; height: 126px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12); border-radius: 4px"
          >
            <img
              :src="require('@/assets/img/fileicon/hetong3.png')"
              style="width: 70px; height: 75px; margin-left: 25px; margin-top: 15px"
            />
            <p style="font-size: 14px; font-weight: 600; color: #55565d; line-height: 21px; margin-left: 30px; margin-bottom: 0">
              电子合同
            </p>
          </div>
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getEmpInfoDetail } from "@/api/staff/staff";
import electronicCOM from "./electronic/index";
import paperCOM from "./paper/index";
export default {
  components: {
    electronicCOM,
    paperCOM
  },
  props: {
    employInfoId: {
      type: String,
      default: ""
    },
    findEmpInfoRelationRes: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      electronic: [],
      paper: [],
      addVisible: false,
      borderStyle1: "",
      borderStyle2: "",
      length: 0,
      state: 0,
      pageLastState: 0
    };
  },
  watch: {
    findEmpInfoRelationRes(v) {
      this.updateContractData();
    }
  },
  methods: {
    initData() {
      this.$emit("updateContractData");
    },
    updateContractData() {
      this.paper =
        this.findEmpInfoRelationRes && this.findEmpInfoRelationRes.empPaperContractList
          ? this.findEmpInfoRelationRes.empPaperContractList
          : [];
      this.electronic =
        this.findEmpInfoRelationRes && this.findEmpInfoRelationRes.empContractList ? this.findEmpInfoRelationRes.empContractList : [];
      this.paper.forEach((e) => {
        e.edit = false;
        e.collapses = false;
      });
      this.electronic.forEach((e) => {
        e.edit = false;
        e.collapses = false;
        e.closable = true;
      });
      this.state = 0;
      this.length = this.paper.length + this.electronic.length;
    },
    addClick() {
      this.addVisible = true;
      this.pageLastState = null;
      this.borderStyle1 = "";
      this.borderStyle2 = "";
    },
    paperClick(e) {
      this.pageLastState = e;
      const primary = localStorage.getItem("primary");
      this.borderStyle1 = `border: 2px solid ${primary};background: ${primary}10;`;
      this.borderStyle2 = "";
    },
    electronicClick(e) {
      const primary = localStorage.getItem("primary");
      this.pageLastState = e;
      this.borderStyle1 = "";
      this.borderStyle2 = `border: 2px solid ${primary};background: ${primary}10;`;
    },
    handleOk() {
      if (this.pageLastState) {
        this.state = this.pageLastState;
        this.addVisible = false;
        this.paper.forEach((e) => {
          e.edit = false;
        });
        this.electronic.forEach((e) => {
          e.edit = false;
        });
      } else {
        this.$notification["error"]({
          message: "error",
          description: "请选择要创建的合同类型"
        });
      }
    },
    handleCancel() {
      this.addVisible = false;
      this.state = 0;
    },
    upState() {
      this.state = 0;
      this.pageLastState = null;
      this.borderStyle1 = "";
      this.borderStyle2 = "";
    }
  }
};
</script>

<style lang="scss" scoped>
.header-title {
  display: flex;
  height: 30px;
  padding-top: 5px;
  .title-info {
    font-size: 16px;
    color: #252525;
    height: 22px;
    line-height: 22px;
    margin-right: 15px;
    padding-left: 15px;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      bottom: auto;
      right: auto;
      height: 20px;
      width: 3px;
      background-color: var(--primary);
    }
  }
  .title-line {
    flex: 1;
    margin-top: 10px;
    height: 1px;
    border: none;
    background: #e8e8e8;
  }
}
</style>
